<template>
	<view>
		<!-- 主体 -->
		<view class="main">
			<view class="order-content">
				<view class="grid-box border-shadow u-m-b-20" v-for="(item, index) in listData" :key="index">
					<view class="top u-border-bottom u-p-b-20">
						<view class="u-flex">
							<view class="left u-flex-1">
								<view class="u-tips-color">{{ item.number }}</view>
								<view><text class="u-font-24 u-tips-color"><text class="bold-txt">{{$u.timeFrom(new Date(item.createddatetime.replace(/-/g,'/')),false)}}下单</text></text></view>
							</view>
							<u-checkbox v-model="item.checked"></u-checkbox>
						</view>
					</view>
					<view class="msg-box u-p-t-10" @click="goDetails(item.id)">
						<view class="u-flex">
							<view class="u-flex-1 u-p-r-20">
								<view class="usertype">
									<text class="u-font-bold">[{{item.address.cityname}}]</text>
									<text>{{item.address.address}}</text>
								</view>
								<view class="address">
									<!-- <u-tag v-if="res.enterprise" text="客户组" mode="dark" size="mini"></u-tag>
									<u-tag v-else text="用户" mode="dark" size="mini"></u-tag> -->
									<text>{{item.address.name}}</text>
									<text class="u-p-l-10">{{item.address.mobile}}</text>
								</view>
								<view class="u-p-t-10">
									<u-tag v-for="(c,k) in item.estimated" :text="c.names" mode="plain" size="mini" class="u-m-r-10"></u-tag>
								</view>
							</view>
							<!-- <view class="distance" v-if="item.distance && item.managestate < 4">
								<view class="u-tips-color"><text>距离直线</text></view>
								<view><text class="u-font-40">{{item.distance}}</text><text class="u-font-24">KM</text>
								</view>
							</view> -->
						</view>
					</view>
					<view class="bottom u-border-top u-p-t-20" @click="goDetails(item.id)">
						<view class="u-flex-1">
							<view class="u-flex">
								<block v-if="item.managestate == '已回收' || item.managestate == '已入库'">
									<view class="u-flex u-flex-1">
										<text class="tips-txt">订单已于{{item.completiontime}}完成</text>
									</view>
								</block>
								<!-- <block v-else>
									<view class="u-flex u-flex-1">
										<navigator class="btn details" :url="`../order/views/views?id=${res.id}`">查看详情</navigator>
									</view>
								</block> -->
							</view>
						</view>
					</view>
				</view>
				<!-- <u-loadmore status="loading" /> -->
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-box">
			<view class="fixed-container">
				<view class="total u-border-bottom u-m-b-30">
					<view class="u-flex">
						<view class="u-flex-1 u-text-left">
							<u-checkbox v-model="checkAll"><text style="font-weight: initial;">全选</text></u-checkbox>
						</view>
						<view>
							<!-- <text>合计：</text>
							<text class="total-price">
								￥{{ utils.formatMoney(total) }}
							</text> -->
						</view>
					</view>
				</view>
				<view class="btn-group u-m-t-30">
					<view class="u-flex">
						<view><text class="u-tips-color">已选:{{ listData.filter((item) => item.checked).length }}</text>
						</view>
						<view class="u-flex u-flex-1">
							<view class="u-flex-1">
								<view class="u-p-r-30 u-text-right">
									<text class="u-color-main" @click="cancel">返回</text>
								</view>
							</view>
							<u-button type="primary" size="medium" @click="confirm">确定</u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				PageIndex: 1,
				PageSize: 30,
				listData: [],
				total: 0, //合计
				ids: [], //选中的id数组
				checkAll: false,
				chooseId: null, //单选中的id
			}
		},
		onLoad(opt) {
			// this.getlistData(true)
			this.getlistData(true).then(()=>{
				if(this.chooseOrder.length > 0){
					this.chooseOrder.forEach((cell,i)=>{
						this.listData.forEach((item, index) => {
							if (item.id == cell.id) {
								// 使用 $set 确保响应式更新
								this.$set(this.listData, index, {
									...item,
									checked: true
								});
							} 
							// else {
							// 	// 设置当前项为选中
							// 	this.$set(this.listData, index, {
							// 		...item,
							// 		checked: false
							// 	});
							// }
						});
					})
				}
			})
		},
		onReachBottom(e) {
			// 此tab为空数据
			this.PageIndex += 1
			if (this.loadStatus == 'loadmore') {
				this.getlistData()
			}
		},
		watch: {
			listData: {
				handler(newValue, oldValue) {//这里的第一个参数是改变后的值，第二个参数是原来的值
					// console.log('改后的值是：' + newValue)
					// console.log('原来的值是：' + oldValue)
					this.total = 0
					// this.payForm.ids = []
					// this.payForm.details = []
					newValue.forEach((item)=>{
						if(item.checked){
							this.total += item.amount
							// this.payForm.ids.push(item.id)

							// this.payForm.details.push({
							// 	id: item.id,
							// 	amount: item.amount
							// })
						}
					})
				},
				deep: true//深度监听
			},
			checkAll(val) {
				if (val) {
					this.listData.forEach((item, i) => {
						this.listData[i].checked = true
					})
				} else {
					this.listData.forEach((item, i) => {
						this.listData[i].checked = false
					})
				}
			},
			chooseOrder(val){
				console.log('chooseOrderList-chooseOrder',val)
			}
		},
		computed: {
			...mapState('brother', {
				chooseOrder: state => state.chooseOrder
			})
		},
		methods: {
			getlistData(isSearch) {
				// 关键词搜索
				if (isSearch) {
					this.PageIndex = 1
					this.listData = []
					this.loadStatus = 'loadmore'
				}
				// 获取待付订单详细列表
				return this.$u.post('/User/Order/List', {
					"PageIndex": this.PageIndex,
					"PageSize": this.PageSize,
					"manageState": 6
				}).then((res) => {
					// data.forEach((item)=>{
					// 	item.checked = false
					// })
					// this.listData = data

					if (res.rows.length > 0) {
						res.rows.forEach((item) => {
							// item.storenames = item.storenames.split(',').filter((item) => item)
							item.checked = false
							this.listData.push(item)
						})

						if (res.rows.length < this.PageSize) {
							this.loadStatus = 'nomore'
						} else {
							this.loadStatus = 'loadmore'
						}
					} else {
						this.loadStatus = 'nomore'
					}
				})
			},

			goDetails(id) {
				uni.navigateTo({
					url: '/pages/brother/order/views/views?id=' + id
				})
			},
			cancel() {
				uni.navigateBack()
			},
			confirm(){
				// this.$emit('confirm',this.chooseId)
				this.$store.commit('brother/setChooseOrder', this.listData.filter((item)=>item.checked == true))
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg-box {
		.u-flex {
			align-items: baseline;
		}

		.usertype {
			font-size: 32rpx;
			padding-top: 10rpx;
		}

		.address {
			color: $u-tips-color;
			padding-top: 10rpx;
		}
	}

	.timefrom {
		color: $u-tips-color;
	}

	.item {
		display: flex;
		margin: 20rpx 0 0;
		justify-content: space-between;

		.left {
			margin-right: 20rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}
		}

		.content {
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}

			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}

			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}

		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;

			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}

			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		font-weight: bold;

		.total-price {
			font-size: 32rpx;
			color: $u-color-orange;
		}
	}

	.bottom-box {
		.fixed-container {
			position: fixed;
			bottom: 0;
			background-color: #fff;
			width: 750rpx;
			padding-top: 0;
			height: 220rpx;
			z-index: 9;
			box-shadow: 0 0 16rpx #e7e7e7;
		}

		.fixed-placeholder {
			height: 220rpx;
			width: 750rpx;
			margin-top: 30rpx;
		}

		.total {
			line-height: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0;
		}

		.btn-group {
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-bottom: 30rpx;
			padding-top: 0;
		}
	}
	
	.bottom {
		display: flex;
		margin-top: 40rpx;
		// padding: 0 10rpx;
		justify-content: space-between;
		align-items: center;

		.btn {
			line-height: 80rpx;
			width: 160rpx;
			border-radius: 8rpx;
			border: 2rpx solid $u-border-color;
			font-size: 32rpx;
			text-align: center;
			color: $u-type-info-dark;
			margin-left: 10rpx;
			flex: 1;
		}

		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
		
		.details{
			background-color: $u-type-primary;
			border-color: $u-type-primary;
			color: #ffffff;
		}
	}
	.inAll {
		text-decoration: underline;
		color: $u-color-blue;
	}
</style>